<ul class="maintabmenu multipletabmenu">
    <li class="current">
        <a href="">Thêm tin tức</a>
    </li>    
</ul><!--maintabmenu-->

<div class="content">    
    <form action="" method="post" class="stdform" id="building-add" novalidate="novalidate">        
        <p>
            <label>Tên tin tức</label>
            <span class="field"><input type="text" class="mediuminput" id="name" name="name"></span>
        </p>
        <p>
            <label>Mô tả</label>
            <span class="field"><input type="text" class="mediuminput" id="description" name="description"></span>
        </p>
        <p>
            <label>Nội dung</label>    
            <textarea id="content" class="mediuminput" name="content" rows="10" cols="80"></textarea>
        </p> 
        <div class="row fileupload-buttonbar">
            <div class="span7">
                <!-- The fileinput-button span is used to style the file input field as button -->                
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Ảnh đại diện...</span>
                    <input id="photo" type="file" data-url="<?php echo base_url(); ?>upload" name="files[]">                   
                </span>
                <div id="photo_prev">
                    
                </div>
                <input type="hidden" id="photo_url" name="photo_url" value=""/>
                <br>               
            </div>
        </div>
        <br>

        <div class="row fileupload-buttonbar">
            <div class="span7">
                <!-- The fileinput-button span is used to style the file input field as button -->                
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Thêm ảnh cho bài viết...</span>
                    <input id="fileupload" type="file" data-url="<?php echo base_url(); ?>upload" name="files[]" multiple>
                </span>
                <br>

                <!-- The container for the uploaded files -->
                <div id="files" class="files"></div>
            </div>
        </div>

        <p class="stdformbutton">
            <button class="submit radius2">Thêm tin tức</button>
        </p>
    </form>
</div>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/plugins/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/custom/general.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/plugins/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/custom/form.js"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/jquery.wysiwyg.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/wysiwyg.image.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/wysiwyg.link.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/wysiwyg.table.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/vendor/jquery.ui.widget.js"></script>

<script src="<?php echo base_url(); ?>back-end/js/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="<?php echo base_url(); ?>back-end/js/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.iframe-transport.js"></script>
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload-image.js"></script>
<!-- The File Upload validation plugin -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload-validate.js"></script>


<script type="text/javascript">
    jQuery('#content').wysiwyg({
        controls: {
            cut: {visible: true },
            copy: { visible: true },
            paste: { visible: true }
        }
    });     
    
</script>

<script>

    jQuery(function ($) {
    
        'use strict';
        // Change this to the location of your server-side upload handler:
        var url = '<?php echo base_url() . 'upload'; ?>',
        uploadButton = $('<button/>')
        .addClass('stdbtn btn_blue')
        .prop('disabled', true)
        .text('Đang xử lý...')
        .on('click', function () {
            var $this = $(this),
            data = $this.data();
            $this
            .off('click')
            .text('Hủy')
            .on('click', function () {
                $this.remove();
                data.abort();
            });
            data.submit().always(function () {
                $this.remove();
            });
            return false;
        });
        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            autoUpload: false,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 5000000, // 5 MB
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
            previewMaxWidth: 100,
            previewMaxHeight: 100,
            previewCrop: true
        }).on('fileuploadadd', function (e, data) {
            data.context = $('<div/>').appendTo('#files');
            $.each(data.files, function (index, file) {
                //var node = $('<p/>').append($('<span/>').text(file.name));
                var node = $('<p/>').append($('<span/>').text(''));
                if (!index) {
                    node
                    .append('<br>')
                    .append(uploadButton.clone(true).data(data));
                }
                node.appendTo(data.context);
            });
        }).on('fileuploadprocessalways', function (e, data) {
            var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
            if (file.preview) {
                node
                .prepend('<br>')
                .prepend(file.preview);
            }
            if (file.error) {
                node
                .append('<br>')
                .append(file.error);
            }
            if (index + 1 === data.files.length) {
                data.context.find('button')
                .text('Upload')
                .prop('disabled', !!data.files.error);
            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
            'width',
            progress + '%'
        );
        }).on('fileuploaddone', function (e, data) {
            $.each(data.result.files, function (index, file) {
            
                var link = $('<a>')
                .attr('target', '_blank')
                .prop('href', file.url);
                $(data.context.children()[index])
                .wrap(link);
                $(data.context.children()[index]).append(file.url);
            });
        }).on('fileuploadfail', function (e, data) {
            $.each(data.result.files, function (index, file) {
                var error = $('<span/>').text(file.error);
                $(data.context.children()[index])
                .append('<br>')
                .append(error);
            });
        }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
</script>

<script>

    jQuery(function ($) {
        $('#photo').fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {       
                    $('#photo_url').val('files/'+file.name);
                    $('#photo_prev').html('<img height="100" src="'+file.url+'" />');
                });
            }
        });
    });
</script>

